<template>
  <div class="change-password-container">
    <el-card class="password-card">
      <div class="password-header">
        <el-page-header :icon="null" @back="goBack" title="返回" content="修改密码"></el-page-header>
      </div>
      
      <div class="password-content">
        <el-form :model="passwordForm" label-width="100px" class="password-form">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入原密码" show-password></el-input>
          </el-form-item>
          
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" show-password></el-input>
          </el-form-item>
          
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请确认新密码" show-password></el-input>
          </el-form-item>
          
          <el-form-item>
            <div class="button-group">
              <el-button type="primary" @click="changePassword">确认修改</el-button>
              <el-button @click="resetForm">重置</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'ChangePassword',
  data() {
    return {
      passwordForm: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      }
    };
  },
  methods: {
    goBack() {
      this.$router.push('/profile');
    },
    changePassword() {
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        this.$message({
          message: '两次输入的密码不一致',
          type: 'error'
        });
        return;
      }
      
      if (this.passwordForm.newPassword === this.passwordForm.oldPassword) {
        this.$message({
          message: '新密码不能与原密码相同',
          type: 'error'
        });
        return;
      }
      
      // TODO: 调用后端接口修改密码
      this.$message({
        message: '密码修改成功！',
        type: 'success'
      });
      
      this.resetForm();
      this.goBack();
    },
    resetForm() {
      this.passwordForm = {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      };
    }
  }
};
</script>

<style scoped>
.change-password-container {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  background-color: #f5f7fa;
  display: flex;
  flex-direction: column;
}

.password-card {
  flex: 1;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}

.password-header {
  padding: 16px 20px;
  border-bottom: 1px solid #ebeef5;
  background-color: #fff;
}

.password-content {
  flex: 1;
  padding: 40px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.password-form {
  width: 100%;
  max-width: 500px;
}

.button-group {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

@media screen and (max-width: 768px) {
  .password-content {
    padding: 20px;
  }
}
</style> 